<template>
  <div>
    <!-- action是图片的上传路径，这里给一个#号避免报错，我们需要自定义上传路径 -->
    <el-upload list-type='picture-card' :limit='1' action="#" :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove" :fileList="fileList" :class="{ disabled: fileCount }" :on-change="changeFile"
      :before-upload="beforeUpload" :http-request="upload">
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 进度条 -->
    <el-progress v-if="showProgress" :percentage="uploadProgress" style="width:180px"></el-progress>

    <!-- 预览图片的弹框 -->
    <el-dialog :visible.sync="dialogVisible" title="图片预览">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>

</template>

<script>
// 腾讯COS包
import Cos from "cos-js-sdk-v5";
// 实例化COS对象
var cos = new Cos({
  // 秘钥和Key
  SecretId: "AKIDA9rJUO1MlumNhkW1FCsISMzLQFn44mDN",
  SecretKey: "uXtymJaaJlwpRmqeBQO6WgZAVZMrmQmr",
});

export default {
  data() {
    return {
      // 图片上传路径
      imageUploadUrl: "",
      //   文件列表
      fileList: [],
      dialogVisible: false,
      dialogImageUrl: "",
      //   记录当前正在上传的uid
      currentFileUid: "",
      //   上传进度,百分比值
      uploadProgress: 0,
      showProgress: false,
    };
  },
  computed: {
    //   是否上传了一张图片，已经上传一张就不显示 +号
    fileCount() {
      return this.fileList.length === 1;
    },
  },
  methods: {
    //   预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //   移除图片
    handleRemove(file, fileList) {
      // 第二个参数，是删除之后剩下的文件列表
      //   this.fileList = fileList;
      this.fileList = this.fileList.filter((item) => item.uid !== file.uid);
    },
    // 文件状态改变,上传文件会调用两次，不能在这里push，不然会push两次
    // 添加文件、上传成功和上传失败时都会被调用
    changeFile(file, fileList) {
      // file是当前的文件，fileList是最新的数组
      this.fileList = fileList.map((item) => item);
    },
    // 上传前检查
    beforeUpload(file) {
      const types = ["image/jpeg", "image/gif", "image/bmp", "image/png"];
      if (!types.some((item) => item == file.type)) {
        // 不是列表中的文件类型
        this.$message.error("上传的图片只能是jpeg、gif、bmp、png格式");
        return false;
      }
      //   最大为5M
      const maxSize = 5 * 1024 * 1024;
      if (file.size > maxSize) {
        //   文件超出限制,file.size的单位是B
        this.$message.error("上传的图片大小不能超过5M");
        return false;
      }
      //   校验通过
      //   开启进度条
      this.showProgress = true;
      //   记录当前uid
      this.currentFileUid = file.uid;
      return true;
    },
    // 上传操作
    upload(params) {
      if (params.file) {
        // 上传
        cos.putObject(
          {
            Bucket: "vcabin-1308471160" /* 必须，存储桶的名字 */,
            Region: "ap-chengdu" /* 存储桶所在地域，必须字段 */,
            Key: params.file.name /* 必须,key值，这里使用文件名 */,
            StorageClass: "STANDARD", //对象的存储类型，默认标准模式即可
            Body: params.file, // 上传文件对象
            onProgress: (progressData) => {
              // {"loaded":46702,"total":46702,"speed":178251.91,"percent":1}
              // 上传进度
              this.uploadProgress = parseInt(progressData.percent * 100);
              //   console.log(JSON.stringify(progressData));
            },
          },
          (err, data) => {
            console.log(err || data);
            // 成功或者失败的回调
            // statusCode==200 成功
            if (!err && data.statusCode === 200) {
              console.log(this.fileList);
              // 上传成功,获取到文件地址,fileList才能显示在组件中，修改fileList中的url
              //   这里使用了this，那这个所在的函数要使用箭头函数，保证this是组件实例
              this.fileList = this.fileList.map((item) => {
                if (item.uid === this.currentFileUid) {
                  // 把对应的图片的地址赋值 upload属性，true表示已经上传到服务器，要为后期应用的时候做标记
                  //   根据是否完成上传到服务器，才确定要不要允许用户点击保存
                  //   上传成功之后会添加一个 status属性，值为'success'
                  return { url: "http://" + data.Location, upload: true };
                } else {
                  return item;
                }
              });
              //   关闭重置进度条
              this.showProgress = false;
              this.uploadProgress = 0;
              console.log(this.fileList);
            }
          }
        );
      }
    },
  },
};
</script>

<style   >
.disabled .el-upload--picture-card {
  display: none !important;
}
</style>